<template>
  <div class="bigbox">
    <div class="topbox" :style="{height:isheight+'px'}">
        <el-form :model="form" ref="form"  label-position="left" label-width="80px" onsubmit="return false">
             <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <!-- <el-select v-model="form.orgNo" style="width: 100%;" size="small"  ref="qiye" @change="changeqi">
                    <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" class="option"></el-option>
                  </el-select> -->
                  <FilterSelect2
                    v-model="form.orgNo"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqi"
                    :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="日期">
                  <!-- <el-date-picker v-model="form.date" type="date" placeholder="选择日期" @change="changedate"
                  size="small" :picker-options="pickerOptions" style="width: 100%;" value-format="yyyy-MM"></el-date-picker> -->
                  <el-date-picker
                    v-model="form.date"
                    type="month"
                    size="small"
                    style="width: 100%;"
                    value-format="yyyy-MM"
                    @change="changedate"
                    placeholder="选择月">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="配电室">
                  <!-- <el-select v-model="form.switchroomId" style="width: 100%;" size="small" @change="changepei">
                    <el-option v-for="(item,index) in peilist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                  </el-select> -->
                  <FilterSelect2
                    v-model="form.switchroomId"
                    :optionlist="peilist"
                    @updateModelValue="changepei"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
                <el-col :span="5">
                <el-form-item label="屏柜">
                  <!-- <el-select v-model="form.screenId" style="width: 100%;" size="small" @change="changeping">
                    <el-option v-for="(item,index) in pinglist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                  </el-select> -->
                  <FilterSelect2
                    v-model="form.screenId"
                    :optionlist="pinglist"
                    @updateModelValue="changeping"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <template v-if="isshow">
                <el-col :span="4">
                <el-form-item label="回路">
                  <!-- <el-select v-model="form.bayId" style="width: 100%;" size="small" @change="changehui">
                    <el-option v-for="(item,index) in huilist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                  </el-select> -->
                  <FilterSelect2
                    v-model="form.bayId"
                    :optionlist="huilist"
                    @updateModelValue="changehui"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="是否计量">
                  <el-select v-model="form.isMeasure" style="width: 100%;" size="small" >
                    <el-option label="是" value="true" class="option"></el-option>
                    <el-option label="否" value="false" class="option"></el-option>
                    <el-option label="全部" value="" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              </template>
              <el-col :span="isshow?19:4" style="text-align: right !important;">
                  <el-button  @click="chongzhi" class="button" size="small">重 置</el-button>
                  <el-button type="primary" @click="submit" size="small">查 询</el-button>
                  <el-button type="text" v-if="isshow"  @click="zedie" >收起 <i class="el-icon-arrow-up"></i> </el-button>
                  <el-button type="text" v-else  @click="zedie" >展开 <i class="el-icon-arrow-down"></i> </el-button>
            </el-col>
             </el-row>
        </el-form>
     </div>
     <div class="bodybox" :style="{height:isshow?'calc(100% - 150px)':'calc(100% - 90px)'}">
        <div style="height: 100%;">
          <template>
          <el-tabs v-model="activeName" >
            <el-tab-pane label="设备用电量报表" name="first">
              <!-- 日抄表 -->
              <SheBeiyd :form="form"
              :value="value"
              :tableshebei="tableshebei"
              :bizOrgName="bizOrgName"
              :switchroomIds="switchroomIds"
               @newsubmit=newsubmit
               ref="shebeiyd" ></SheBeiyd>
               <div class="fenye" style="text-align: right;">
                  <el-pagination
                  background
                  layout="prev, pager, next"
                  :current-page.sync="page._pageNo"
                  :page-size="200"
                  @current-change="getshebeolist"
                  :total="+shebeitotalCount">
                </el-pagination>
               </div>
            </el-tab-pane>
            <el-tab-pane label="月度用电量统计" name="second">
              <!-- 日用电量 -->
              <YueDuyd :form="form"
              :tableyuedu="tableyuedu"
              :switchroomIds="switchroomIds"
               :value="value"
               :bizOrgName="bizOrgName"
                @newsubmit=newsubmit
                ref="yueduyd"></YueDuyd>
                <div class="fenye" style="text-align: right;">
                  <el-pagination
                  background
                  layout="prev, pager, next"
                  :current-page.sync="pages._pageNo"
                  :page-size="200"
                  @current-change="getyuedulist"
                  :total="+yuedutotalCount">
                </el-pagination>
               </div>
            </el-tab-pane>
          </el-tabs>
        </template>
        </div>
     </div>
  </div>
</template>

<script>
import { getceshijiekou, getpdaxialaapi, getpgxialaapi, gethuixialaapi } from '@/api/ElectricalDistribution/dayreport'
import { getshebeilistapi, getyuedulistapi } from '@/api/ElectricalDistribution/monthreport'
import SheBeiyd from './shebeiyd.vue'
import YueDuyd from './yueduyd.vue'
export default {
  name: 'ReportFormsIndex',
  components: {
    SheBeiyd,
    YueDuyd
  },
  data () {
    return {
      isheight: 80,
      isshow: false,
      qiyelist: [],
      peilist: [],
      pinglist: [],
      huilist: [],
      form: { date: '', switchroomId: '', isMeasure: '', bayId: '', screenId: '' },
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }
        ]
      },
      activeName: 'first',
      tableyuedu: [],
      value: '',
      tableshebei: [],
      bizOrgName: '',
      val: '',
      switchroomIds: '',
      page: {
        _pageNo: 0,
        _pageSize:200
      },
      yuedutotalCount: '',
      shebeitotalCount: '',
      pages: {
        _pageNo: 0,
        _pageSize:200
      },
    }
  },

  async mounted () {
    const dates = new Date()
    const year = dates.getFullYear() // 年
    const month = dates.getMonth() + 1 // 月
    this.form.date = year + '-' + month
    this.value = year + '-' + month

    await this.getxialalist()
    this.getshebeolist() 
    this.getyuedulist() 
  },

  methods: {
    // 设备
    async getshebeolist() {
      this.$refs.shebeiyd.loading = true
const ress = await getshebeilistapi({...this.form,_pageNo:this.page._pageNo-1,_pageSize:this.page._pageSize})
this.tableshebei = ress.data.list
this.shebeitotalCount=ress.data.totalCount

  this.$refs.shebeiyd.loading = false

    },
    // 月度
    async getyuedulist() {
      this.$refs.yueduyd.loading = true
      const res = await getyuedulistapi({...this.form,_pageNo:this.pages._pageNo-1,_pageSize:this.pages._pageSize})
    this.yuedutotalCount=res.data.totalCount
    this.tableyuedu = res.data.list
    this.$refs.yueduyd.loading = false
    },
    async getxialalist () {
      const res = await getceshijiekou()
      this.qiyelist = res.data.list
      this.form.orgNo = this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo : res.data.list[0].bizOrgNo
      this.bizOrgName = this.qiyelist.filter(ele=>ele.bizOrgNo === this.form.orgNo)[0]?.bizOrgName
      const ress = await getpdaxialaapi({ orgNo:this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo : this.qiyelist[0].bizOrgNo })
      this.peilist = ress.data.list
      this.switchroomIds=ress.data.list[0].name
      this.form.switchroomId = ress.data.list[0].id
      const resss = await getpgxialaapi(ress.data.list[0].id)
      this.pinglist = resss.data.list
      const ressss = await gethuixialaapi({ screenId: resss.data.list[0].id })
      this.huilist = ressss.data.list
    },
    zedie () {
      this.isshow = !this.isshow
      if (this.isshow) {
        this.isheight = 140
      } else {
        this.isheight = 80
      }
    },
    async changeqi(val) {
      this.$store.commit('setuserobject', val)
      this.val = val
      const ress = await getpdaxialaapi({ orgNo: val })
      this.peilist = ress.data.list
      this.form.switchroomId = ress.data.list[0] ? ress.data.list[0].id : ''
      if (ress.data.list[0]) {
        const resss = await getpgxialaapi(ress.data.list[0].id)
        this.pinglist = resss.data.list
        this.form.screenId = ''
        if (resss.data.list[0]) {
          const ressss = await gethuixialaapi({ screenId: resss.data.list[0].id })
          this.huilist = ressss.data.list
        } else {
          this.huilist = []
          this.form.bayId = ''
        }
      } else {
        this.pinglist = []
        this.huilist = []
      }
    },
    async changepei (val) {
      const resss = await getpgxialaapi(val)
      this.pinglist = resss.data.list
      this.form.screenId = ''
      if (resss.data.list[0]) {
        const ressss = await gethuixialaapi({ screenId: resss.data.list[0].id })
        this.huilist = ressss.data.list
      } else {
        this.huilist = []
        this.form.bayId = ''
      }
    },
    async changeping (val) {
      const ressss = await gethuixialaapi({ screenId: val })
      this.huilist = ressss.data.list
      this.form.bayId = ''
    },
    changehui (val) {
      this.form.bayId = val
    },
    changedate (val) {
      console.log(val)
      // this.value = val
    },
    async submit () {
      if (!this.form.switchroomId) return this.$message.warning('配电室不可为空')
      this.bizOrgName = this.qiyelist.filter(ele => ele.bizOrgNo == this.form.orgNo)[0]?.bizOrgName
      this.switchroomIds=this.peilist.filter(ele=>ele.id==this.form.switchroomId)[0].name
      this.$refs.shebeiyd.loading = true
      this.$refs.yueduyd.loading = true
      this.value = this.form.date
      const ress = await getshebeilistapi({...this.form,_pageNo:this.page._pageNo-1,_pageSize:this.page._pageSize})
      this.tableshebei = ress.data.list
      const res = await getyuedulistapi({...this.form,_pageNo:this.pages._pageNo-1,_pageSize:this.pages._pageSize})
      this.tableyuedu = res.data.list
      this.$refs.shebeiyd.updatetable()
      this.$refs.yueduyd.updatetable()
      this.$refs.shebeiyd.loading = false
      this.$refs.yueduyd.loading = false
      // this.$nextTick(() => {
      //   this.$refs.elTable.doLayout()
      // })
    },
    async chongzhi () {
      this.form.screenId = ''
      this.form.bayId = ''
      this.form.isMeasure = ''
      console.log(this.form)
      this.$refs.shebeiyd.loading = true
      this.$refs.yueduyd.loading = true
      const resssss = await getshebeilistapi({...this.form,_pageNo:this.page._pageNo-1,_pageSize:this.page._pageSize})
      this.tableshebei = resssss.data.list
      // this.$set(this.tableshebei, 'tableshebei', ress.data.list)
      const resssssss = await getyuedulistapi({...this.form,_pageNo:this.pages._pageNo-1,_pageSize:this.pages._pageSize})
      this.tableyuedu = resssssss.data.list
      const res = await getceshijiekou()
      this.qiyelist = res.data.list
      this.form.orgNo = res.data.list[0].bizOrgNo
      this.bizOrgName = res.data.list[0].bizOrgName
      const ress = await getpdaxialaapi({ orgNo: this.qiyelist[0].bizOrgNo })
      this.peilist = ress.data.list
      this.switchroomIds=ress.data.list[0].name
      this.form.switchroomId = ress.data.list[0].id
      const resss = await getpgxialaapi(ress.data.list[0].id)
      this.pinglist = resss.data.list
      const ressss = await gethuixialaapi({ screenId: resss.data.list[0].id })
      this.huilist = ressss.data.list
      this.$refs.shebeiyd.loading = false
      this.$refs.yueduyd.loading = false
    },
    newsubmit () {
      this.submit()
      this.$message.success('列表刷新成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
}
.topbox{
  background-color: #fff;
  padding: 20px;
}
.bodybox{
  background-color: #fff;
  margin-top: 10px;
  padding: 20px;
}
::v-deep .el-tabs, .el-tab-pane{
  height: 100%;
}
::v-deep .el-tabs__content{
  height: 92%;
}
</style>
